<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <el-row>
            <el-col :span="12">
                <div class="collapse-btn" @click="collapseChage">
                    <i v-if="!collapse" class="bg-icon el-icon-s-fold"></i>
                    <i v-else class="bg-icon el-icon-s-unfold"></i>
                </div>
            </el-col>
            <el-col :span="12">
                <!-- <div class="user-photo">
                    <img class="user-logo" src="../../../static/img/img.jpg" />
                </div> -->
                <el-dropdown
                    class="user-info"
                    trigger="click"
                    @command="handleCommand"
                >
                    <div class="user-name">
                        欢迎：{{ username }}&ensp;
                        <img
                            class="user-logo"
                            src="../../../static/img/img.jpg"
                        />
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userCenter"
                            >个人中心</el-dropdown-item
                        >
                        <el-dropdown-item command="loginout"
                            >退出</el-dropdown-item
                        >
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
        <div class="breadcrumb">
            <v-bread></v-bread>
        </div>
    </div>
</template>
<script>
import vBread from "./Breadcrumb.vue";
import eventBus from "../../utils/eventBus";
export default {
    components: {
        vBread,
    },
    data() {
        return {
            collapse: false,
            name: "",
        };
    },
    computed: {
        username() {
            let username = sessionStorage.getItem("ms_username");
            return username ? username : this.name;
        },
    },
    methods: {
        handleCommand(command) {
            if (command == "loginout") {
                sessionStorage.removeItem("ms_username");
                sessionStorage.removeItem("ms_userId");
                this.$router.push("/login");
            } else if (command == "userCenter") {
                this.$router.push("/userCenter");
            }
        },
        collapseChage() {
            this.collapse = !this.collapse;
            eventBus.$emit("collapse", this.collapse);
        },
    },
};
</script>
<style>
.el-header {
    height: 80px;
}
.breadcrumb {
    height: 30px;
    width: 100%;
    /* background-color: yellow; */
}
.collapse-btn {
    font-size: 24px;
    height: 60px;
    line-height: 60px;
    width: 60px;
    /* text-align: center; */
    /*caret-color: rgba(0, 0, 0, 0);取消鼠标悬停光标  */
    caret-color: rgba(0, 0, 0, 0);
}

.user-name {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: auto;
    caret-color: rgba(0, 0, 0, 0);
}
.user-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
}

.user-info {
    float: right;
    padding-right: 35px;
}
</style>
